<template>
  <div class="upbtn">
    <input
      style="opacity: 0;"
      class="upbtn"
      type="file"
      accept="image/*"
      @change="upphoto($event)"
      ref="headinput"
    />
    <div class="bg" v-if="img!=''">
      <div
        class="btndiv"
        v-if="(option.ceilbutton==undefined||JSON.stringify(option.ceilbutton)=='')?DefaultOption.ceilbutton:option.ceilbutton"
      >
        <div class="btn1" @click="img=''">取消</div>
        <div class="img" @click="rotating"></div>
        <div class="btn" @click="tailoring">确定</div>
      </div>
      <div class="wrapper">
        <vueCropper
          id="cropper"
          ref="cropper"
          :img="img"
          :outputSize="(option.outputSize==undefined||JSON.stringify(option.outputSize)=='')?DefaultOption.outputSize:option.outputSize"
          :outputType="(option.outputType==undefined||JSON.stringify(option.outputType)=='')?DefaultOption.outputType:option.outputType"
          :info="(option.info==undefined||JSON.stringify(option.info)=='')?DefaultOption.info:option.info"
          :canScale="(option.canScale==undefined||JSON.stringify(option.canScale)=='')?DefaultOption.canScale:option.canScale"
          :autoCrop="DefaultOption.autoCrop"
          :autoCropWidth="(option.autoCropWidth==undefined||JSON.stringify(option.autoCropWidth)=='')?DefaultOption.autoCropWidth:option.autoCropWidth"
          :autoCropHeight="(option.autoCropHeight==undefined||JSON.stringify(option.autoCropHeight)=='')?DefaultOption.autoCropHeight:option.autoCropHeight"
          :fixed="(option.fixed==undefined||JSON.stringify(option.fixed)=='')?DefaultOption.fixed:option.fixed"
          :fixedNumber="(option.fixedNumber==undefined||JSON.stringify(option.fixedNumber)=='')?DefaultOption.fixedNumber:option.fixedNumber"
          :full="(option.full==undefined||JSON.stringify(option.full)=='')?DefaultOption.full:option.full"
          :fixedBox="(option.fixedBox==undefined||JSON.stringify(option.fixedBox)=='')?DefaultOption.fixedBox:option.fixedBox"
          :canMove="(option.canMove==undefined||JSON.stringify(option.canMove)=='')?DefaultOption.canMove:option.canMove"
          :canMoveBox="(option.canMoveBox==undefined||JSON.stringify(option.canMoveBox)=='')?DefaultOption.canMoveBox:option.canMoveBox"
          :original="(option.original==undefined||JSON.stringify(option.original)=='')?DefaultOption.original:option.original"
          :centerBox="(option.centerBox==undefined||JSON.stringify(option.centerBox)=='')?DefaultOption.centerBox:option.centerBox"
          :high="(option.high==undefined||JSON.stringify(option.high)=='')?DefaultOption.high:option.high"
          :infoTrue="(option.infoTrue==undefined||JSON.stringify(option.infoTrue)=='')?DefaultOption.infoTrue:option.infoTrue"
          :maxImgSize="(option.maxImgSize==undefined||JSON.stringify(option.maxImgSize)=='')?DefaultOption.maxImgSize:option.maxImgSize"
          :enlarge="(option.enlarge==undefined||JSON.stringify(option.enlarge)=='')?DefaultOption.enlarge:option.enlarge"
          :mode="(option.mode==undefined||JSON.stringify(option.mode)=='')?DefaultOption.mode:option.mode"
          @cropMoving="moving($event)"
          @imgMoving="moving($event)"
        ></vueCropper>
      </div>
      <div
        class="btndiv"
        v-if="!((option.ceilbutton==undefined||JSON.stringify(option.ceilbutton)=='')?DefaultOption.ceilbutton:option.ceilbutton)"
      >
        <div class="btn1" @click="img=''">取消</div>
        <div class="img" @click="rotating"></div>
        <div class="btn" @click="tailoring">确定</div>
      </div>
    </div>
  </div>
</template>
<script>
import { VueCropper } from "vue-cropper";
export default {
  components: { VueCropper },
  props: {
    option: {
      type: null,
      default: {}
    }
  },
  data() {
    return {
      img: "",
      DefaultOption: {
        ceilbutton: false, //顶部按钮，默认底部
        outputSize: 1, //裁剪生成图片的质量
        outputType: "png", //裁剪生成图片的格式,默认png
        info: false, //裁剪框的大小信息
        canScale: true, //图片是否允许滚轮缩放
        autoCrop: false, //是否默认生成截图框
        autoCropWidth: 0, //默认生成截图框宽度
        autoCropHeight: 0, //默认生成截图框高度
        fixed: true, //是否开启截图框宽高固定比例
        fixedNumber: [1, 1], //截图框的宽高比例
        full: false, //是否输出原图比例的截图
        fixedBox: true, //固定截图框大小 不允许改变
        canMove: true, //上传图片是否可以移动
        canMoveBox: false, //截图框能否拖动
        original: false, //上传图片按照原始比例渲染
        centerBox: true, //截图框是否被限制在图片里面
        high: true, //是否按照设备的dpr 输出等比例图片
        infoTrue: false, //true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        maxImgSize: 2000, //限制图片最大宽度和高度
        enlarge: 1, //图片根据截图框输出比例倍数
        mode: "100%" //图片默认渲染方式
      }
    };
  },
  watch: {},
  methods: {
    //选择照片
    async upphoto(e) {
      let photourl = e.target.files[0];
      this.$refs.headinput.value = null;
      if (photourl != undefined) {
        this.$emit("imgorigoinf", photourl);
        this.img = await this.onloadimg(photourl);
        this.DefaultOption.autoCrop = true;
        setTimeout(() => {
          this.addsolide();
        }, 10);
      }
    },
    //异步onload图片
    onloadimg(photourl) {
      return new Promise(function(resolve, reject) {
        let reader = new FileReader();
        reader.readAsDataURL(photourl);
        reader.onload = e => {
          resolve(e.target["result"]);
        };
      });
    },
    //确定裁剪
    tailoring() {
      // 获取截图的base64数据
      this.$refs.cropper.getCropData(data => {
        this.$emit("getbase64Data", data);
        this.img = "";
        this.DefaultOption.autoCrop = false;
      });
      // 获取截图的blob数据
      this.$refs.cropper.getCropBlob(data => {
        this.$emit("getblobData", data);
        this.img = "";
        this.DefaultOption.autoCrop = false;
      });
    },
    //旋转照片
    rotating() {
      this.$refs.cropper.rotateRight();
      document.getElementsByClassName("cropper-modal")[0].style =
        "background-color: rgba(0,0,0,0.5);transition: 0.88s";
    },
    //裁剪框移动
    moving(e) {
      //   console.log(e);
      if (e.moving) {
        document.getElementsByClassName("cropper-modal")[0].style =
          "background-color: rgba(0,0,0,0.5);transition: 0.88s";
      } else {
        document.getElementsByClassName("cropper-modal")[0].style =
          "background-color: rgba(0,0,0,0.8);transition: 0.88s";
      }
    },
    //添加网格线
    addsolide() {
      if (document.getElementById("vertical") == null) {
        let box = document.getElementsByClassName("cropper-crop-box")[0];
        //左网格线
        let verticalLeft = document.createElement("div");
        verticalLeft.id = "vertical";
        verticalLeft.style.width = "1px";
        verticalLeft.style.height = "100%";
        verticalLeft.style.top = "0px";
        verticalLeft.style.left = "33%";
        verticalLeft.style.position = "absolute";
        verticalLeft.style.backgroundColor = "#fff";
        verticalLeft.style.zIndex = "522";
        verticalLeft.style.opacity = "0.5";
        //右网格线
        let verticalRight = document.createElement("div");
        verticalRight.style.width = "1px";
        verticalRight.style.height = "100%";
        verticalRight.style.top = "0px";
        verticalRight.style.right = "33%";
        verticalRight.style.position = "absolute";
        verticalRight.style.backgroundColor = "#fff";
        verticalRight.style.zIndex = "522";
        verticalRight.style.opacity = "0.5";
        //上网格线
        let verticalTop = document.createElement("div");
        verticalTop.style.width = "100%";
        verticalTop.style.height = "1px";
        verticalTop.style.top = "33%";
        verticalTop.style.left = "0px";
        verticalTop.style.position = "absolute";
        verticalTop.style.backgroundColor = "#fff";
        verticalTop.style.zIndex = "522";
        verticalTop.style.opacity = "0.5";
        //下网格线
        let verticalBottom = document.createElement("div");
        verticalBottom.style.width = "100%";
        verticalBottom.style.height = "1px";
        verticalBottom.style.bottom = "33%";
        verticalBottom.style.left = "0px";
        verticalBottom.style.position = "absolute";
        verticalBottom.style.backgroundColor = "#fff";
        verticalBottom.style.zIndex = "522";
        verticalBottom.style.opacity = "0.5";
        //左上边线
        let LeftTopSide = document.createElement("div");
        LeftTopSide.style.width = "30px";
        LeftTopSide.style.height = "4px";
        LeftTopSide.style.top = "-4px";
        LeftTopSide.style.left = "-4px";
        LeftTopSide.style.position = "absolute";
        LeftTopSide.style.backgroundColor = "#fff";
        LeftTopSide.style.zIndex = "522";
        LeftTopSide.style.opacity = "1";
        //上左边线
        let TopListSide = document.createElement("div");
        TopListSide.style.width = "4px";
        TopListSide.style.height = "30px";
        TopListSide.style.top = "-4px";
        TopListSide.style.left = "-4px";
        TopListSide.style.position = "absolute";
        TopListSide.style.backgroundColor = "#fff";
        TopListSide.style.zIndex = "522";
        TopListSide.style.opacity = "1";
        //右上边线
        let RightTopSide = document.createElement("div");
        RightTopSide.style.width = "30px";
        RightTopSide.style.height = "4px";
        RightTopSide.style.top = "-4px";
        RightTopSide.style.right = "-4px";
        RightTopSide.style.position = "absolute";
        RightTopSide.style.backgroundColor = "#fff";
        RightTopSide.style.zIndex = "522";
        RightTopSide.style.opacity = "1";
        //上右边线
        let TopRightSide = document.createElement("div");
        TopRightSide.style.width = "4px";
        TopRightSide.style.height = "30px";
        TopRightSide.style.top = "-4px";
        TopRightSide.style.right = "-4px";
        TopRightSide.style.position = "absolute";
        TopRightSide.style.backgroundColor = "#fff";
        TopRightSide.style.zIndex = "522";
        TopRightSide.style.opacity = "1";
        //左下边线
        let LeftBottomSide = document.createElement("div");
        LeftBottomSide.style.width = "30px";
        LeftBottomSide.style.height = "4px";
        LeftBottomSide.style.bottom = "-4px";
        LeftBottomSide.style.left = "-4px";
        LeftBottomSide.style.position = "absolute";
        LeftBottomSide.style.backgroundColor = "#fff";
        LeftBottomSide.style.zIndex = "522";
        LeftBottomSide.style.opacity = "1";
        //下左边线
        let BottomListSide = document.createElement("div");
        BottomListSide.style.width = "4px";
        BottomListSide.style.height = "30px";
        BottomListSide.style.bottom = "-4px";
        BottomListSide.style.left = "-4px";
        BottomListSide.style.position = "absolute";
        BottomListSide.style.backgroundColor = "#fff";
        BottomListSide.style.zIndex = "522";
        BottomListSide.style.opacity = "1";
        //右下边线
        let RightBottomSide = document.createElement("div");
        RightBottomSide.style.width = "30px";
        RightBottomSide.style.height = "4px";
        RightBottomSide.style.bottom = "-4px";
        RightBottomSide.style.right = "-4px";
        RightBottomSide.style.position = "absolute";
        RightBottomSide.style.backgroundColor = "#fff";
        RightBottomSide.style.zIndex = "522";
        RightBottomSide.style.opacity = "1";
        //下右边线
        let BottomRightSide = document.createElement("div");
        BottomRightSide.style.width = "4px";
        BottomRightSide.style.height = "30px";
        BottomRightSide.style.bottom = "-4px";
        BottomRightSide.style.right = "-4px";
        BottomRightSide.style.position = "absolute";
        BottomRightSide.style.backgroundColor = "#fff";
        BottomRightSide.style.zIndex = "522";
        BottomRightSide.style.opacity = "1";
        //一起生成
        box.appendChild(verticalLeft);
        box.appendChild(verticalRight);
        box.appendChild(verticalTop);
        box.appendChild(verticalBottom);
        box.appendChild(LeftTopSide);
        box.appendChild(TopListSide);
        box.appendChild(RightTopSide);
        box.appendChild(TopRightSide);
        box.appendChild(LeftBottomSide);
        box.appendChild(BottomListSide);
        box.appendChild(RightBottomSide);
        box.appendChild(BottomRightSide);
      }
    }
  },
  mounted() {}
};
</script>
<style scoped>
.upbtn {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 100%;
  height: 100%;
}
.bg {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100%;
  background-color: #000;
  left: 0;
  z-index: 521;
}
.btn {
  height: 8vw;
  line-height: 8vw;
  font-size: 4vw;
  width: 16vw;
  border-radius: 1.333vw;
  text-align: center;
  background-color: #ed594c;
  margin-top: 2.667vw;
}
.btn1 {
  height: 8vw;
  line-height: 8vw;
  font-size: 4vw;
  width: 16vw;
  border-radius: 1.333vw;
  text-align: center;
  background-color: #606266;
  margin-top: 2.667vw;
}
.img {
  height: 8vw;
  width: 8vw;
  margin-top: 2.667vw;
  background-image: url("");
  background-size: 100% 100%;
}
.btndiv {
  height: 13.333vw;
  color: #fff;
  justify-content: space-between;
  display: flex;
  padding: 0 4vw;
  line-height: 13.333vw;
  font-size: 4vw;
}
.wrapper /deep/ .crop-point {
  opacity: 0;
  z-index: 523;
}
.wrapper /deep/ .cropper-view-box {
  outline: 1px solid #fff;
  border: 1px solid #fff;
}
.wrapper /deep/ .vue-cropper {
  background-color: #000;
  background-image: none;
}
.wrapper {
  height: calc(100vh - 21.333vw);
  padding: 4vw;
}
</style>